﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Calculate Long Routes Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=loadSample" async defer></script>

    <script type="text/javascript">
        var map,
            bingMapsKey = "Your Bing Maps Key",
            testLocations;

        function loadSample() {
            //Waypoint locations can be a mix of addresses and waypoints
            testLocations = [
                      "1 Microsoft Way, Redmond, WA",
                      "Seattle, WA",
                      "Space Needle",
                      new Microsoft.Maps.Location(47.5886, -122.336),
                      new Microsoft.Maps.Location(47.5553, -122.334),
                      new Microsoft.Maps.Location(47.5557, -122.316),
                      new Microsoft.Maps.Location(47.5428, -122.322),
                      new Microsoft.Maps.Location(47.5425, -122.341),
                      new Microsoft.Maps.Location(47.5538, -122.362),
                      new Microsoft.Maps.Location(47.5647, -122.384),
                      new Microsoft.Maps.Location(47.5309, -122.380),
                      new Microsoft.Maps.Location(47.5261, -122.351),
                      new Microsoft.Maps.Location(47.5137, -122.382),
                      new Microsoft.Maps.Location(47.5101, -122.337),
                      new Microsoft.Maps.Location(47.4901, -122.341),
                      new Microsoft.Maps.Location(47.4850, -122.320),
                      new Microsoft.Maps.Location(47.5024, -122.263),
                      new Microsoft.Maps.Location(47.4970, -122.226),
                      new Microsoft.Maps.Location(47.4736, -122.265),
                      new Microsoft.Maps.Location(47.4562, -122.287),
                      new Microsoft.Maps.Location(47.4452, -122.338),
                      new Microsoft.Maps.Location(47.4237, -122.292),
                      new Microsoft.Maps.Location(47.4230, -122.257),
                      new Microsoft.Maps.Location(47.3974, -122.249),
                      new Microsoft.Maps.Location(47.3765, -122.277),
                      new Microsoft.Maps.Location(47.3459, -122.302),
                      new Microsoft.Maps.Location(47.3073, -122.280),
                      new Microsoft.Maps.Location(47.3115, -122.228),
                      new Microsoft.Maps.Location(47.2862, -122.218),
                      new Microsoft.Maps.Location(47.2714, -122.294),
                      new Microsoft.Maps.Location(47.2353, -122.306),
                      new Microsoft.Maps.Location(47.1912, -122.408)
            ];

            GetMap();
        }

        function GetMap() {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), { credentials: bingMapsKey });

            //Register and load the RouteServiceHelper Module
            Microsoft.Maps.registerModule("RouteServiceHelper", "scripts/RouteServiceHelper.js");
            Microsoft.Maps.loadModule("RouteServiceHelper");

            var testLoc = ["<b>Test Waypoints</b><br/>"];
            for (var i = 0; i < testLocations.length; i++) {
                testLoc.push(i + 1, '. ');

                if (typeof testLocations[i] == 'string') {
                    testLoc.push(testLocations[i]);
                } else if (testLocations[i].latitude != null && testLocations[i].longitude != null) {
                    testLoc.push(testLocations[i].latitude, ',', testLocations[i].longitude);
                }

                testLoc.push('<br/>');
            }

            document.getElementById('testLocations').innerHTML = testLoc.join('');
        }

        function CalculateRoute() {
            map.entities.clear();

            //Create route options
            var options = {
                avoid: null,
                distanceBeforeFirstTurn: 0,
                heading: null,
                optimize: 'time',
                routePathOutput: 'Points',
                travelMode: 'Driving',
                distanceUnit: 'km',
                culture: null,
                batchSize: 15
            };

            document.getElementById('statusDiv').innerHTML = "Calculating Route...";

            map.getCredentials(function (key) {
                RouteServiceHelper.GetRoute(testLocations, key, options, RouteCallback);
            });
        }

        function RouteCallback(result) {
            if (result && result.statusCode == 200 &&
                  result.resourceSets &&
                  result.resourceSets.length > 0 &&
                  result.resourceSets[0].resources &&
                  result.resourceSets[0].resources.length > 0) {

                document.getElementById('statusDiv').innerHTML = "Route Calculated.";

                var res = result.resourceSets[0].resources[0];

                //Set map view based on bounding box
                map.setView({ bounds: Microsoft.Maps.LocationRect.fromEdges(res.bbox[2], res.bbox[1], res.bbox[0], res.bbox[3]), padding: 20 });

                //Draw route path
                if (res.routePath && res.routePath && res.routePath.line
                      && res.routePath.line.coordinates
                      && res.routePath.line.coordinates.length >= 2) {
                    var p = [],
                    c = res.routePath.line.coordinates;

                    for (var i = 0; i < c.length; i++) {
                        p.push(new Microsoft.Maps.Location(c[i][0], c[i][1]));
                    }

                    map.entities.push(new Microsoft.Maps.Polyline(p, { strokeColor: new Microsoft.Maps.Color(156, 0, 0, 255) }));
                }

                //Draw Waypoints
                for (var i = 0; i < res.routeLegs.length; i++) {
                    map.entities.push(new Microsoft.Maps.Pushpin(
                        new Microsoft.Maps.Location(res.routeLegs[i].actualStart.coordinates[0], res.routeLegs[i].actualStart.coordinates[1]), {
                            text: i + 1 + ''
                        }));
                }

                map.entities.push(new Microsoft.Maps.Pushpin(
                      new Microsoft.Maps.Location(res.routeLegs[res.routeLegs.length - 1].actualEnd.coordinates[0], res.routeLegs[res.routeLegs.length - 1].actualEnd.coordinates[1]), {
                          text: res.routeLegs.length + 1 + ''
                      }));
            } else if (result && result.statusCode != 200) {
                document.getElementById('statusDiv').innerHTML = "Error: " + result.errorDetails;
            }
        }
    </script>
</head>
<body>
    <div style='position:relative'>
        <div id='myMap' style="position:relative;float:left;width:600px;height:500px;"></div>
        <div style="position:relative;float:left;margin-left:10px;">
            <div id='testLocations'></div>
            <input type="button" value="Calculate Route" onclick="CalculateRoute()" /><div id='statusDiv'></div>
        </div>
    </div>
</body>
</html>